<template>
  <!-- 实时工况 -->
  <view class="conter">
    <cc-goback title='实时工况' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <!-- <uni-card>
      <navigator class="head_a" url="../working_condition_a/working_condition_a">
        徽州区
        <image src="../../static/organization_ranking/xl.png" mode=""></image>
      </navigator>
    </uni-card> -->
    <view class="head_a">
      <view class="head_word">
        <ms-dropdown-menu>
          <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
        </ms-dropdown-menu>
      </view>
    </view>
    <view class="content_card" v-if="falg==0">
      <view class="enterprise_circular" v-if="stateList">
        <view class="circular_frist">
          <view class="circular_conter">
            <view class="conter_frist">
              {{stateList.count.start}}
            </view>
            <view class="conter_two">
              正常
            </view>
          </view>
          <image src="../../static/working_condition/1.png" mode=""></image>
        </view>
        <view class="circular_frist">
          <view class="circular_conter">
            <view class="conter_frist">
              {{stateList.count.fault}}
            </view>
            <view class="conter_two">
              故障
            </view>
          </view>
          <image src="../../static/working_condition/4.png" mode=""></image>
        </view>
        <view class="circular_frist">
          <view class="circular_conter">
            <view class="conter_frist">
              {{stateList.count.stop}}
            </view>
            <view class="conter_two">
              停机
            </view>
          </view>
          <image src="../../static/working_condition/2.png" mode=""></image>
        </view> 
        <view class="circular_frist">
          <view class="circular_conter">
            <view class="conter_frist">
              {{stateList.count.offline}}
            </view>
            <view class="conter_two">
              离线
            </view>
          </view>
          <image src="../../static/working_condition/3.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 列表卡片 -->
    <view class="list_card" v-if="falg==0">
      <view class="list">
        <!-- 表格 -->
        <uni-table border stripe>
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="25%" align="center">企业名称</uni-th>
            <uni-th width="25%" align="center">设备总功率</uni-th>
            <uni-th width="25%" align="center">实时状态</uni-th>
            <uni-th width="25%" align="center">操作</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,i) in stateList.enterpriseCount" :key='i'>
            <uni-td align="center">{{item.name}}</uni-td>
            <uni-td align="center">{{item.power}}w</uni-td>
            <uni-td align="center">{{item.stateName}}</uni-td>
            <uni-td align="center" style="color: #1677FF;">
              <view @click="btn(item.id,i)">
              查看
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <view class="footer" v-if="falg==1">
      <view class="foot_a">
        <view class="foot_aa">
        </view>
        工况设备列表
      </view>
      <view class="foot_b" v-if="list">
        <view class="foot_head">
          <image src="../../static/working_condition/5.png" mode=""></image>
          {{list[0].equName}}
        </view>
        <view class="foot_bottom">
          <view class="foot_left">
            <view class="foot_left_a">
               {{list[0].stateName}}
            </view>
            <view class="foot_left_b">
              状态
            </view>
          </view> 
          <view class="foot_right">
            <view class="foot_right_a">
              {{list[0].currentPower}}W
            </view>
            <view class="foot_right_b">
              功率
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        stateList: '',
        list:'',
        value: 0,
        All_enterpriseList: [],
        enterprise_id: '',
        falg: 0,
      };
    },
    onLoad() {
      this.getAllstate()
    },
    methods: {
      // 点击查看获取具体状态
      btn(id,i){
        this.enterprise_id = id
        this.getstat()
        this.falg=1
        this.value = i+1
        // console.log(this.value)
      },
      // 全部企业状态
      getAllstate() {
        this.$http.get('/envirnment-air/app/workStatistics/realWork', {}).then(res => {
          console.log('设备状态数量统计', res)
          if (res.code == '00000') {
            this.stateList = res.data
            console.log('设备状态数量统计', this.stateList)
            const list = []
            res.data.enterpriseCount.forEach((item, index) => {
              list.push({
                text: item.name,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '徽州区',
              value: 0
            })
            this.All_enterpriseList = list
          }
        })
      },
      // 设备状态数量统计
      getstat(){
      this.$http.get('/envirnment-air/app/workStatistics/realWorkDetail',{
        id:this.enterprise_id
      }).then(res=>{
        if(res.code=='00000'){
          this.list = res.data
        }
        // console.log('res',res)
      })
      },
      mileage(e) {
        this.enterprise_id = e.id
        this.getstat()
        this.falg=1
        console.log('enterprise_id',this.enterprise_id);
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height: 100vh;
    background: #F7F7F7;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head_a {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .enterprise_circular {
    display: flex;
    justify-content: space-around;
    margin-top: 31rpx;
  }
 .content_card{
   width: 702rpx;
   margin: 0 auto 20rpx;
   background-color: #FFFFFF;
   overflow: hidden;
 }
  .circular_frist {
    position: relative;
    width: 165rpx;
    height: 165rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .circular_conter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
  }

  .conter_frist {
    font-size: 44rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #FFFFFF;
  }

  .conter_two {
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .list_card {
    width: 702rpx;
    margin: 0 auto;
    border-radius: 8rpx;
    padding: 20rpx 0;
    background-color: #FFFFFF;
  }

  .list {
    margin: 0 auto;
    width: 662rpx;
  }
  .footer{
    width: 702rpx;
    height: 800rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .foot_a{
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #475368;
    opacity: 1;
    display: flex;
    align-items: center;
    margin: 28rpx 0 0 32rpx;
  }
  .foot_aa{
    width: 12rpx;
    height: 28rpx;
    margin-right: 8rpx;
    background-color: #4EA1FF;
  }
  .foot_b{
    width: 638rpx;
    height: 224rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 10rpx rgba(148, 165, 199, 0.4);
    opacity: 1;
    border-radius: 5rpx;
    margin: 40rpx auto 0;
  }
  .foot_head{
    width: 590rpx;
    height: 72rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2rpx solid rgba(148, 165, 199, 0.2);
    image{
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }
  }
   .foot_bottom{
     width: 100%;
     display: flex;
   }
   .foot_left{
     width: 50%;
     text-align: center;
   }
   .foot_right{
     width: 50%;
     text-align: center;
   }
   .foot_left_a{
     font-size: 40rpx;
     font-family: Source Han Sans CN;
     font-weight: 500;
     color: #4EA1FF;
     opacity: 1;
     margin-top: 40rpx;
   } 
   .foot_left_b{
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #475368;
   } 
   .foot_right_a{
     font-size: 40rpx;
     font-family: Source Han Sans CN;
     font-weight: 500;
     color: #475368;
     opacity: 1;
     margin-top: 40rpx;
   } 
   .foot_right_b{
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #475368;
   }
     
</style>
